<template>
  <xDialog v-model="isShow" width="500px">
    <el-form :model="trademarkParams" :rules="rules" label-width="auto" ref="formRef" style="max-width: 600px">
      <el-form-item label="姓名" prop="tmName">
        <el-input v-model="trademarkParams.tmName" placeholder="请输入姓名" />
      </el-form-item>

      <el-form-item label="品牌LOGO" prop="logoUrl">
        <UploadImg v-model="trademarkParams.logoUrl"></UploadImg>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="isShow = false">取消</el-button>
      <el-button type="primary" @click="isShow = false">确定</el-button>
    </template>
  </xDialog>
</template>

<script setup lang="ts">
import UploadImg from '@/components/UploadImg/index.vue'
import xDialog from '@/components/x-dialog/index.vue'
import { ref, reactive, nextTick } from 'vue'
defineProps({
  modalData: { required: false, type: Object, default: () => {} },
  modalType: { required: false, type: String, default: 'add' }
})
const isShow = ref(false)
const formRef = ref()
const trademarkParams = reactive({
  tmName: '',
  logoUrl: ''
})
const rules = reactive({
  tmName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  logoUrl: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
})
const open = () => {
  isShow.value = true
  if (!formRef.value) return
  nextTick(() => {
    formRef.value.resetFields()
  })
}
defineExpose({
  open
})
</script>

<style scoped></style>
